// header

// 顶部迷你购物车
class miniShopCar {
    constructor() {
        this.show();
        this.hid();
    }
    show() {
        $('#header-car').on('mouseenter', function () {
            $('#header-car-son').stop().slideDown()
        })
    }
    hid() {
        $('#header-car').on('mouseleave', function () {
            $('#header-car-son').stop().slideUp()
        })
    }

}
let minicar = new miniShopCar();
// 搜索框
class search {
    constructor() {
        this.focus();
        this.mouseenter();
        this.mouseleave();
        this.lick();
    }
    // 聚焦
    focus() {
        $('#neck .neck-search input').on('focus', function () {
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #ff6a00"
            })
            $('#neck .neck-search ul').slideDown(100);
        })
    }
    //失去焦点
    blur() {
        $('#neck .neck-search input').on('blur', function () {
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #e0e0e0"
            })
            $('#neck .neck-search ul').slideUp(100);
        })
    }
    //进入文本框
    mouseenter() {
        $('#neck .neck-search').on('mouseenter', function () {
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #888888"
            })
        })
    }
    //离开文本框
    mouseleave() {
        $('#neck .neck-search').on('mouseleave', function () {
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #b0b0b0"
            })
            $('#neck .neck-search ul').slideUp(100);
        })
    }
    //点击li
    lick() {
        $('#neck .neck-search ul li').on('click', function () {
            console.log(1);
            $('#neck .neck-search input').val($(this).html());
            $('#neck .neck-search input,#neck .neck-search span,#neck .neck-search ul').css({
                "border": " 1px solid #e0e0e0"
            })
            $('#neck .neck-search ul').slideUp(100);
        })
    }


}
let intSearch = new search();
// 导航栏下拉菜单
class driverList {
    constructor() {
        this.showHide();
        this.addList();
    }
    showHide() {
        $('#neck .neck-divider ul li:lt(7)').on('mouseenter', function () {
            $('#neckFather .neck-divider-list').stop().slideDown(200);
        });
        $('#neck .neck-divider ul li:gt(6),#neck-list').on('mouseenter', function () {
            $('#neckFather .neck-divider-list').stop().slideUp(200);
        });
        $('.neck-divider-list').on('mouseleave', function () {
            $('#neckFather .neck-divider-list').stop().slideUp(200);
        })
        // 二级列表常显
        $('#carousel-left').stop().show();
        $('#neck-list a').hide();
        // $('#neck-list').on('mouseenter', function () {
        //     $('#carousel-left').stop().show();
        // })
        // $('#neck-list,#carousel-left').on('mouseleave', function () {
        //     $('#carousel-left').stop().hide();
        // })

    }
    addList() {
        $('#neck .neck-divider li:lt(7)').on('mouseover', function () {
            // 获取当前点击li 的下标
            let index = $(this).index();
            //console.log(index);
            $.get("../php/container-list.json", function (data) {
                let arr = Array.from(data[index]);
                let str = "";
                for (let i = 0; i < arr.length; i++) {
                    str += `<div class="col-md-2 goods1">
                    <img src="${arr[i].img}" alt="">
                    <div></div>
                    <p>${arr[i].name}</p>
                    <span>${arr[i].price}</span>
                </div>`;
                }
                $('.neck-divider-list .row').html(str);
                // 节点删除最后一个分割线
                $('.neck-divider-list .goods1:last-child div').remove();
            })
        })
    }
}
let dl = new driverList();
// 轮播图模块二级菜单
class carouselList {
    constructor() {
        this.showHide();
        this.addList();
    }
    showHide() {
        $('#carousel-left li').on('mouseenter', function () {
            $('#carousel-son').stop().show();
        })
        $('#carousel-left').on('mouseleave', function () {
            $('#carousel-son').stop().hide();
        })
    }
    addList() {
        $('#carousel-left li').on('mouseover', function () {
            // 获取当前点击li 的下标
            let index = $(this).index();
            //获取下标对应的数据
            $.get("../php/carousel-left.json",
                function (data) {
                    //将对象转换为数组
                    let arr = Array.from(data[index]);
                    // console.log(arr);
                    // 给子列表添加内容
                    let str = "";
                    for (let i = 0; i < arr.length; i++) {
                        str += ` <div class="carousel-list"><a href="#"><img src="${arr[i].img}" alt="">${arr[i].info}</a></div>`;
                    }
                    $('#carousel-son').html(str);
                });

        })
    }
}
let cl = new carouselList();





// 足部
$('footer').load('footer.html');

// 轮播图
class aroundPic {
    constructor() {
        this.btn();
        this.change();
        this.time();
    }
    // 按钮
    btn() {
        $('#around-pic button').on('mouseenter', function () {
            $(this).css("background", "rgba(133, 131, 131,0.7)")
        })
        $('#around-pic button').on('mouseout', function () {
            $(this).css("background", "rgba(133, 131, 131,0)")
        })
    }
    change() {
        let m = 0;
        $('#around-pic .btn-right').on('click', function () {
            if (m > 2) {
                m = 0;
            }
            let arr = Array.from($('#around-pic img'));
            let arrLi = Array.from($('#around-pic ul li'));
            $(arr[m]).stop().fadeIn().siblings().stop().fadeOut();
            $(arrLi[m]).css("background", "rgba(133, 131, 131,0)").siblings().css("background", "rgba(133, 131, 131,1)");
            m++;
        })
        $('#around-pic .btn-left').on('click', function () {
            if (m < 0) {
                m = 2;
            }
            let arr = Array.from($('#around-pic img'));
            let arrLi = Array.from($('#around-pic ul li'));
            $(arr[m]).stop().fadeIn().siblings().fadeOut();
            $(arrLi[m]).css("background", "rgba(133, 131, 131,0)").siblings().css("background", "rgba(133, 131, 131,1)");
            m--;
        })
    }
    // 定时器
    time() {
        let timer = setInterval(function () {
            $('#around-pic .btn-right').click();
        }, 2000);
        $('#around-pic').on('mouseenter', function () {
            clearInterval(timer);
        })
        $('#around-pic').on('mouseleave', function () {
            clearInterval(timer);
            timer = setInterval(function () {
                $('#around-pic .btn-right').click();
            }, 2000);
        })
    }
}
new aroundPic();
$('#around-pic .btn-right').click();
// 小米秒杀
class Spike {
    constructor() {
        this.goodList();
    }
    goodList() {
        let left = $('#spike .spike-son .goods-list ul').position().left;
        if (left == 0) {
            $('#spike .btn-right').attr("disabled", true);
            $('#spike .btn-right').css({ color: '#e5e2e1' })
        }

        $('#spike .btn-left').on('click', function () {
            left = left - 1000;
            $('#spike .spike-son .goods-list ul').stop().animate({ left: left + 'px' }, "slow");

        })

        $('#spike .btn-right').on('click', function () {
            left = left + 1000;
            $('#spike .spike-son .goods-list ul').stop().animate({ left: left + 'px' }, "slow");
        })
        $('#spike button').on('mouseenter', function () {
            $(this).css({ color: '#ff6a00' });
        })
        $('#spike button').on('mouseout', function () {
            $(this).css({ color: '#97928e' });
        })
        $('#spike button').on('click', function () {
            if (left == 0) {
                $('#spike .btn-right').attr("disabled", true);
                $('#spike .btn-right').css({ color: '#e5e2e1' })
            } else if (left == -2000) {
                $('#spike .btn-left').attr("disabled", true);
                $('#spike .btn-left').css({ color: '#e5e2e1' })
            } else {
                $('#spike button').attr("disabled", false);
                $('#spike button').css({ color: '#97928e' })
            }
        })
    }
}
new Spike();
// 倒计时
class countDown {
    constructor() {
        this.getTime();
    }
    getTime() {
        setInterval(function () {
            let time = new Date();
            let hour = time.getHours() + 1;
            let newTime = new Date(`${time.getFullYear()}-${time.getMonth() + 1}-${time.getDate()} ${hour}:00:00`);
            //    倒计时时间差
            let times = (newTime - time) / 1000;
            //    时
            let h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            //    分
            let m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            //    秒
            let s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            // 注入
            $('#spike .countDown h5').html(`${hour}:00 场`);
            $('#spike .countDown .timer div').eq(0).html(h);
            $('#spike .countDown .timer div').eq(1).html(m);
            $('#spike .countDown .timer div').eq(2).html(s);
        }, 1000)
    }
 
}
new countDown();
// 电梯
class elevator{
    constructor(){
        this.showHide();
        this.find();
    }
    showHide(){
        $(window).on('scroll',function(){      
            let dic=$(window).scrollTop();
            if(dic>100){
                $('#elevator').fadeIn();
            }else{
                $('#elevator').fadeOut();
            }
        })
    }
    find(){
        $('#elevator .floor').click(function(){
           let m= $('.title').eq($(this).index()).offset().top;
            $('body,html').stop().animate({
                scrollTop:m
            })
        })
        $('#elevator .toTop').click(function(){
            $('body,html').stop().animate({
                scrollTop:0
            })
            //console.log($(window).scrollTop());
        })

        $(window).on('scroll',function(){      
            let dic=$(window).scrollTop();
            if(dic>6459){
                $('#elevator div').eq(7).css({
                    color:'#ffac13'
                }).siblings().css({
                    color:'#767b82'
                })
            }else if(dic>5609){
                $('#elevator div').eq(6).css({
                    color:'#ffac13'
                }).siblings().css({
                    color:'#767b82'
                })
            }else if(dic>4759){
                $('#elevator div').eq(5).css({
                    color:'#ffac13'
                }).siblings().css({
                    color:'#767b82'
                })
            }else if(dic>3909){
                $('#elevator div').eq(4).css({
                    color:'#ffac13'
                }).siblings().css({
                    color:'#767b82'
                })
            }else if(dic>3059){
                $('#elevator div').eq(3).css({
                    color:'#ffac13'
                }).siblings().css({
                    color:'#767b82'
                })
            }else if(dic>2209){
                $('#elevator div').eq(2).css({
                    color:'#ffac13'
                }).siblings().css({
                    color:'#767b82'
                })
            }else if(dic>1359){
                $('#elevator div').eq(1).css({
                    color:'#ffac13'
                }).siblings().css({
                    color:'#767b82'
                })
            }else if(dic>800){
                $('#elevator div').eq(0).css({
                    color:'#ffac13'
                }).siblings().css({
                    color:'#767b82'
                })
            }else{
                $('#elevator div').css({
                    color:'#767b82'
                })
            }
        })
    }
}
new elevator();
$('#elevator').hide();

// 链接跳转
class jump{
    constructor(){
        this.toNext()
    }
    toNext(){
        $('.header-right ol li').eq(0).click(function(){
            sessionStorage.removeItem('to')
         })
        $('.header-right ol li').eq(1).click(function(){
           sessionStorage.setItem('to',1)
        })
    }
}
new jump();


// 判断登陆状态


class judgment{
    constructor(){
        //this.seven();
        this.temporary();
        this.logOut();
    }
    // 七日免登陆
    // seven(){
    //   let passName= localStorage.getItem('pass');
    //     if(passName){
    //         let getName=JSON.parse(passName);
    //         $('.header-right ol li').eq(0).html('欢迎').css('color','red');
    //         $('.header-right ol li').eq(1).html(getName.id).css('color','red');
    //     }
    // }
    // 会话登陆
    temporary(){
        // let passName= sessionStorage.getItem('pass');
        // console.log( JSON.parse());
        if(getCookie('pass')==''){
            
        }else{
            let getName=JSON.parse(getCookie('pass'));
            if(getName){
                $('.header-right ol li').eq(0).html('欢迎').css('color','red');
                $('.header-right ol li').eq(1).html(getName.id).css('color','red');
            }
        }
        
    }
    // 注销
    logOut(){
        $('.header-right ol li').eq(2).on('click',function(){
            // sessionStorage.clear();
            // localStorage.clear();
            delCookie('pass');
            location.reload(true);
        })
    }
}
new judgment();